<template>
  <div class="main_wrap">
    <div class="topic_wrap">
      <div class="topic_title">
        <span class="title_name">测试名称：</span>
        <span class="title_content">
          <a-input
            v-model="TestData.title"
            @blur="inputBlur"
            ref="input"
          ></a-input>
        </span>
        <span class="title_selectData">
          <a-date-picker
            v-if="Object.keys(TestData).length != 0"
            show-time
            :locale="locale"
            placeholder="请选择结束日期"
            :showToday="false"
            @ok="pickerOk"
            v-model="TestData.endTime"
            :disabled-date="disabledDate"
            :disabledTime="disabledDateTime"
          >
          </a-date-picker>
        </span>
      </div>
      <div
        class="topic_item"
        v-for="(item, index) in topicData"
        :key="item.key"
      >
        <div class="topic_index">{{ index + 1 }}.</div>
        <div class="topic_content">{{ item.title }}</div>
        <div class="topic_seting">
          <a-button
            type="primary"
            size="small"
            icon="edit"
            @click="alterTopic('编辑题目', index)"
            >编辑</a-button
          >
          <a-popconfirm
            title="确定要删除这条题目？"
            ok-text="确定"
            cancel-text="取消"
            @confirm="removeItem(index)"
          >
            <a-button type="danger" size="small"> 删除 </a-button>
          </a-popconfirm>
        </div>
      </div>
    </div>
    <div class="add_topic" @click="addTopic('添加题目')">
      <span>
        <a-icon type="plus" />
      </span>
      <span>添加题目</span>
    </div>
    <div class="topic_submit">
      <a-button type="primary" ghost @click="submitTopic"> 完成 </a-button>
    </div>

    <!-- 抽屉组件 -->
    <a-drawer
      :title="drawerTitle"
      placement="right"
      :closable="false"
      :visible="visible"
      @close="onClose"
      width="20%"
    >
      <a-select default-value="简答题">
        <a-select-option value="简答题"> 简答题 </a-select-option>
        <a-select-option value="单选题" disabled> 单选题 </a-select-option>
        <a-select-option value="多选题" disabled> 多选题 </a-select-option>
      </a-select>
      <div class="textarea_item">
        <a-textarea placeholder="请出题" :rows="4" v-model="textContent" />
      </div>
      <div class="btn_item">
        <a-button icon="check" @click="ChangeTopicData"> 完成 </a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// import store from "@/store/store";
import moment from "moment";
import "moment/locale/zh-cn";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
export default {
  props: {
    removeTableItem: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      // data: {},
      visible: false, //控制抽屉的显隐
      drawerTitle: "题目", //抽屉的title
      textContent: "", //出题的多行输入框的value
      alertIndex: 0, //修改题目的下标索引
      locale,
      moment,
    };
  },
  mounted() {
    this.$refs.input.focus();
  },
  computed: {
    ...mapState(["selectGroupKey"]),
    ...mapState("IntemshipGroup", ["TestData", "topicData"]),
  },
  methods: {
    ...mapMutations("IntemshipGroup", ["addTestItem"]),
    //提交测试 并且触发父类的方法删除当前的tabs页
    submitTopic() {
      // if (this.TestData.endTime.length <= 0) {
      //   this.TestData.endTime = this.TestData.endTime
      //     ? this.TestData.endTime
      //     : moment().locale("zh-cn").format("YYYY-MM-DD HH:mm:ss");
      // }
      if (this.topicData.length <= 0) {
        this.$message.warning("请至少添加一条题目");
        return;
      }
      var param = {
        name: this.TestData.title,
        groupID: this.selectGroupKey,
        endTime: this.TestData.endTime,
        topic: this.topicData.map((item) => item.title),
      };
      if (this.TestData.id && this.TestData.id.length > 0) {
        console.log(this.TestData);
        param.id = this.TestData.id;
      }
      console.log(param);
      this.$api
        .IssueExercise(param)
        .then((res) => {
          if (res.data.result) {
            this.removeTableItem();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //显示抽屉
    onShow(title) {
      this.drawerTitle = title;
      this.visible = true;
    },
    //关闭抽屉
    onClose() {
      this.visible = false;
    },
    //编辑题目
    alterTopic(title, index) {
      this.onShow(title);
      this.textContent = this.topicData[index].title;
      this.alertIndex = index;
    },
    //添加题目
    addTopic(title) {
      this.onShow(title);
      this.textContent = "";
      this.alertIndex = this.topicData.length + 1;
    },
    //修改出题的data中添加数据
    ChangeTopicData() {
      if (this.textContent.length <= 0) {
        this.$message.error("未输入题目");
        return;
      }
      if (this.alertIndex >= this.topicData.length) {
        var temp = {
          key: this.topicData.length + 1,
          title: `${this.textContent}`,
        };
        this.topicData.push(temp);
      } else {
        this.topicData[this.alertIndex].title = this.textContent;
      }
      this.onClose();
    },
    //气泡确认删除的回调
    removeItem(index) {
      this.topicData.splice(index, 1);
    },
    //题目名称的输入框失去焦点
    inputBlur() {
      if (this.TestData.title.length <= 0) {
        this.TestData.title = this.TestData.oldTitle;
      }
    },
    pickerOk() {
      this.TestData.endTime = this.TestData.endTime.format("YYYY-MM-DD HH:mm");
    },
    disabledDate(current) {
      return current && current < moment().subtract(0, "days"); //当天之前的不可选，不包括当天
      // return  current < moment(this.TestData.endTime);
    },
    disabledDateTime(current) {
      return {
        // disabledHours: () => this.range(0, 24).splice(0, new Date().getHours()), //ban小时
        disabledHours: () =>
          current.date() > new Date().getDate()
            ? []
            : this.range(0, 24).splice(0, new Date().getHours()), //ban小时
        disabledMinutes: () =>
          current.hour() > new Date().getHours()
            ? []
            : this.range(0, new Date().getMinutes()), //ban分
      };
    },
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },
  },
};
</script>

<style lang="less" scoped>
.main_wrap {
  width: 50%;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 1%;

  .topic_wrap {
    .topic_title {
      margin: 1% 4% 3% 4%;
      font-size: 18px;
      font-weight: 600;
      display: flex;
      align-items: center;
      .title_content {
        .ant-input {
          border: none;
          border-radius: 0;
          border-bottom: 1px solid #ccc;
        }
      }
      .title_selectData {
        width: 50%;
        text-align: right;
      }
    }
    .topic_item {
      border-bottom: 1.5px solid #ccc;
      width: 70%;
      margin: 0 auto;
      display: flex;
      padding: 1%;

      .topic_index {
        width: 10%;
        text-align: center;
        font-weight: 600;
        position: relative;

        &::before {
          content: "*";
          color: red;
          position: absolute;
          top: 10%;
          left: 15%;
        }
      }

      .topic_content {
        width: 60%;
      }

      .topic_seting {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30%;

        .ant-btn-primary {
          margin: 0 2%;
          background-color: #e6a23c;
          border: none;
        }
      }
    }
  }

  .add_topic {
    border: 1px dashed #ccc;
    width: 30%;
    margin: 2% auto;
    font-weight: 600;
    text-align: center;
    padding: 1%;
    transition: all 0.5s;

    &:hover {
      color: #7b9e31;
      border: 1px solid #7b9e31;
      cursor: pointer;
    }

    span {
      margin: 0px 1%;
    }
  }

  .topic_submit {
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-direction: row-reverse;

    .ant-btn {
      border: none;
      border: 1px solid #7b9e31;
      color: #7b9e31;
      padding: 0 30px;
      font-size: 16px;
    }
  }
}

.textarea_item {
  margin: 5% 0;
}

.btn_item {
  display: flex;
  flex-direction: row-reverse;
}
</style>